<style lang="less">
	.content {
		text-align: center;
		padding-top: 40upx;
	}
    .hader{
        margin:60upx 0 100upx 0;
    }
    .hader image{
        display: block;
        margin: 0 auto;
        width: 240upx;
    }
	.main{
		padding: 0 30upx;
		box-sizing: border-box;
	}
    .zhuce{
        border-bottom: 1upx solid rgba(221,221,221,1);
		.mobile{
			width: 80%;
		}
		input{
			line-height: 80upx;
			padding: 10upx;
			height: 80upx;
			font-size: 28upx;
			border: none;
			box-sizing: border-box;
			outline: none;
			text-align: left;
		}
    }
    .weixi{
        display: flex;
        justify-content:center;
        text-align: center;
        line-height: 60upx;
        color: #999999;
        font-size: 28upx;
        margin-top: 60upx;
    }
    .weixi image{
        width: 60upx;
        height: 60upx;
        margin: 0 0 0 20upx;
    }
    .but{
        display: block;
        width: 80%;
        margin: 100upx auto 0;
        line-height: 80upx;
        border-radius:40upx;
        background: #333333;
        color: #FFFFFF;
        text-align: center;
    }
	picker{
	  float: left;
	}
	.picker{
	  margin-right:10upx;
	  line-height: 80upx;
	  .picker-img{
	    width: 22upx;
		margin-left: 10upx;
	  }
	}
</style>
<template>
	<view class="content">
		<view class="hader">
		    <image src="/static/img/login.png" mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="zhuce">
				<picker @change="bindPickerChange" :value="index" :range="array" range-key="country">
					<view class="picker" v-if="array!=''">
						{{array[index].areaCode}}
						<image src="/static/img/arrowup_icons@2x.png" class="picker-img" mode="widthFix"></image>
					</view>
				</picker>
				<input type="text" maxlength="11" class="mobile" v-model="mobile" placeholder="请输入手机号" @input="onKeyUserNameInput" id="mobile" /> 
			</view>
			<view class="zhuce"><input type="password" class="password" v-model="password" name="" @input="passwordInput" id="password" placeholder="请输入密码" maxlength="30"></view>
			<view class="but" id="showTooltips" @tap="showTooltips">登录</view>
			<!-- <view class="weixi"><text>微信授权登录</text><image src="/static/img/wechat_login.png" mode="widthFix" @tap="onGotUserInfo"></image></view> -->
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	export default {
		data() {
			return {
				mobile: "",  
				password: "",
				array:[],
				index:0,
			}
		},
		onLoad() {
			this.checkoutphoneList()
		},
		methods: {
			// 获取国家号
			  async checkoutphoneList() {
			    const [err, res] = await api.checkoutphoneList({
			       header:{
			        'Content-Type': 'application/json'
			       }
			    })
			  	console.log(res,err,111)
			    if (res.data.code == 0 ) {
			      this.array=res.data.data
				  for(let i=0; i<this.array.length; i++){
					  if(this.array[i].country=='中国'){
						  this.index=i
					  }
				  }
			    } else {
			     let errorStr ='网络出错'
			     if(res.data.msg){
			       errorStr = res.data.msg
			     }
				 uni.showToast({
				   title: errorStr,
				   icon: 'none'
				 })
			    }
			  },
			async login(){
				console.log(222,this.array)
				 let newMobile=this.array[this.index].areaCode
				const [err, res] = await api.login({
					query: {
						 mobile:this.mobile,
						 password :this.password,
						 areaCode:newMobile
					}
				 });
				 console.log(res)
				 if(res.data.code == 0){
					 let token=res.data.data.token
					 uni.setStorageSync('token', token);
					let url=uni.getStorageSync('url')
					console.log(url,888)
					// if(url!='' && url!=null){
					// 	uni.reLaunch({
					// 	  url: '/'+url+''
					// 	})
					// }else{
						uni.reLaunch({
						  url: "/pages/mine/mine"
						})
					// }
				 }else{
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				 }
			},
			bindPickerChange: function(e) {
			   this.index=e.detail.value
			 },
			 onKeyUserNameInput(e) {  
                this.mobile = e.target.value  
            }, 
			 passwordInput(e){
				 this.password = e.target.value  
			 },
			showTooltips(){
				this.login()
			},
			onGotUserInfo(){
				let url=uni.getStorageSync('url')
				let href=encodeURIComponent('https://h5.xpandago.net/wechat/index.html#/'+url);
				let hrefUrl=encodeURIComponent('https://h5.xpandago.net/wechat/index.html#/pages/mine/mine')
				console.log(href)
				if(url!='' && url!=null){
					location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd242cbb43e8c6351&redirect_uri='+href+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'

				}else{
					location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd242cbb43e8c6351&redirect_uri='+hrefUrl+'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
				}
			}
		}
	}
</script>
